<template>
  <div class="echarts-container">
    <!-- 饼状图 -->
    <v-chart class="chart" :option="option" />
    <!-- 折线图 -->
    <v-chart class="chart" :option="option2" />
  </div>
</template>

<script>
/* 功能函数库 */
import { useDateFormat } from '@vueuse/core'
// 导入依赖
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import ECharts, { THEME_KEY } from "vue-echarts";
// 挂载依赖
use([
  CanvasRenderer,
  PieChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  useDateFormat
]);
// 图设计
export default {
  name: "chart",
  components: {
    "v-chart": ECharts,
  },
  provide: {
    [THEME_KEY]: "light",
  },
  /* 接收父组件 */
  props: {
    features: {
      type: Array,      //类型
      required: false,   //是否必填
      default: []     //默认值
    },
  },
  // 数据
  data() {
    return {
      // 饼状图
      option: {
        title: {
          text: "事故类型数目统计图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "该类型事件个数",
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "碰撞" },
              { value: 0, name: "刮擦" },
              { value: 0, name: "其他" },
              { value: 0, name: "失火" },
              { value: 0, name: "翻车" },
              { value: 0, name: "碾压" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      //   折线图
      option2: {
        title: {
          text: '每月事故数量统计图',
          left: "center",

        },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['Event']
        // },
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {},
        series: [
          {
            name: '事件数量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: "line",
            areaStyle: {},
            lineStyle: {
              normal: {
                color: "black",
                width: 2,
                type: "dashed",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    // console.log(this.features);
    /* 初始化表格 */
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      // this.option.series[0].data.forEach((item, index, arr) => {
      //   arr[index] = 0
      // })
      // this.option.series[0].data.forEach((item, index, arr) => {
      //   arr[index] = 0
      // })
      // console.log("初始化");
      /* 把数据渲染到表格 */
      /* 统计各类事故的数量 */
      this.features.map((item) => {
        switch (item.事件类型) {
          case "碰撞":
            this.option.series[0].data[0].value += 1
            break;
          case "刮擦":
            this.option.series[0].data[1].value += 1
            break;
          case "其他":
            this.option.series[0].data[2].value += 1
            break;
          case "失火":
            this.option.series[0].data[3].value += 1
            break;
          case "翻车":
            this.option.series[0].data[4].value += 1
            break;
          case "碾压":
            this.option.series[0].data[5].value += 1
            break;
        }
        /* 统计月份及各月的事故 */
        /* 日期格式化 */
        let mounth = useDateFormat(item.发生时间, 'MM')
        // console.log(typeof mounth.value);
        // console.log("开始日期格式化");
        // console.log(this.option2.series[0].data);
        switch (mounth.value) {
          case "1":
            this.option2.series[0].data[0] += 1
            break;
          case "2":
            this.option2.series[0].data[1] += 1
            break;
          case "3":
            this.option2.series[0].data[2] += 1
            break;
          case "4":
            this.option2.series[0].data[3] += 1
            break;
          case "5":
            this.option2.series[0].data[4] += 1
            break;
          case "6":
            this.option2.series[0].data[5] += 1
            break;
          case "7":
            this.option2.series[0].data[6] += 1
            break;
          case "8":
            this.option2.series[0].data[7] += 1
            break;
          case "9":
            this.option2.series[0].data[8] += 1
            break;
          case "10":
            this.option2.series[0].data[9] += 1
            break;
          case "11":
            this.option2.series[0].data[10] += 1
            break;
          case "12":
            this.option2.series[0].data[11] += 1
            break;
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.echarts-container {
  display: flex;
  width: 880px;
  justify-content: center;
  align-items: center;

  .chart {
    height: 400px;
    width: 550px;
  }
}
</style>
